<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- stylesheet-样式表/CSS，后面的href就来填写刚才我们创建的CSS文件 -->
    <!-- <link rel="stylesheet" href="demo.css"> -->
</head>
<body>
    <style>
        /* ul a{
            color: red;
        }

        ol>a{
            color: red;
        } */
        /* ul>li,ol>li{
            color: red;
        } */
        /* div {
            color: black;
        } */
        /* 鼠标悬停的时候，应用这个样式 */
        /* div:hover{
            color: red;
        } */
        /* 鼠标按下的时候，应用这个样式 */
        /* div:active{
            color: blue;
        } */
        /* .one{
            font-family: "dsidasdoaisd","fssdasdae";
        }
        .tow{
            font-family: "楷体";
        } */

        /* .one{
            font-size: 10px;
        }
        .two{
            font-size: 30px;
        } */
        /* .one{
            font-weight:lighter;
        }
        .tow{
            font-weight: bold;
        }
        .three{
            font-weight: bolder;
        }
        .four{
            font-weight: normal;
        } */
        /* em {
            font-style: normal;
        } */
        /* div{
            color: red;
        } */
        /* div{
            color: rgb(255, 255, 255);
        } */
        /* .one{ */
            /* 红：00，绿色：Ff，蓝色 00 */
            /* color: #00ff00; */
            /* 转换成十进制，红 0，绿:255，蓝0 */
            /* color: #8899aa;
        }
        .two{
            color: #89a;
        }
        .three{
            color: rgba(red, green, blue, alpha);
        } */
        /* .one{
            text-align: left;
        }
        .two{
            text-align: center;
        }
        .three{
            text-align:  right;
        } */
        /* a{
            text-decoration: none;
        } */
        /* p{
            text-indent: -2em;
        } */
        /* .two{ */
            /* 设置行高 */
            /* line-height: 50;
        } */
        /* body{
            background-color: rgb(60, 60, 60);
        } */

        /* 给 div 设置一些尺寸 */
        /* div {
            width: 600px;
            height: 500px;
            font-size: 20px; */
            /* 为了更清楚的看到 div 的范围，我们给设置一个背景颜色 */
            /* background-color: rgb(28,240,244);
            color: blue; */
            /* background-color: transparent;  */
            /* background-image: url(joker.jpg);  */
            /* no-repeat - 不进行平铺 */
            /* background-repeat: no-repeat;
            background-position: center;
            background-size: cover; */


            /* 水平居中 */
            /* text-align: center; */

            /* 垂直居中 */
            /* 在利用行高来使用垂直居中的时候 */
            /* 要保证 与 div 的高度一致 */
            /* 这样我们就可以利用行高的上下间距相等的特性，来实现垂直居中 */
            /* line-height: 150px;
        } */
        /* div{ */
            /* 将高度设置为宽度的一半 */
            /* width: 200px;
            height: 100px; */
            /* 背景颜色 */
            /* background-color: black; */
            /* 字体颜色 */
            /* color: white; */
            /* 与圆形不同，length设置为高度的一半 */
            /* border-radius: 10px 20px 30px 40px;
        } */
        /* a{
            width: 200px;
            height: 150px;
            display: block;
        } */
        /* span{
            width: 200px;
            height: 100px;
            border: 10px black dashed;
            box-sizing: border-box;
            padding: 5px;
        } */
        /* .one{
            width: 500px;
            height: 200px;
            background-color: black;

        }
        .two{
           width: 200px;
           height: 100px;
           background-color: grey; */
           /* 这里的0，表示的是：上下外边距为0 */
           /* auto，表示的是：左右外边距为 auto */
           /* auto的意思，就是让浏览器去自动适应 */
           /* margin: auto 0;
        } */
        .parent{
            /* width: 100%,让当前元素的宽度和它的父元素（body标签）一样宽 */
            /* body，就是整个浏览器的窗口 */
            width: 100%;
            height: 200px;
            /* wheat - 小麦色 */
            background-color: wheat;
            display: flex;
            /* space-between 让数据在排列的过程中，两边穿插上空白*/
            justify-content: space-around; 
            align-items: flex-end;
        }
        .one, .two, .three{
            width: 100px;
            height: 100px;
            /* pink- 粉色 */
            background-color: pink;
        }

    </style>
    <div class="parent">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="two">4</div>
        <div class="three">5</div>
    </div>

    <!-- <div class="one">
        <div class="two"></div>
    </div> -->

    <!-- <span class="one">
        这是一个元素
    </span>
    <span class="two">
        这是一个元素
    </span> -->
    <!-- <div>
        <a href="#">这是一个连接</a>
        <a href="#">这是一个连接</a>
        <a href="#">这是一个连接</a>
    </div> -->


    <!-- <div class="one">上一行</div>
    <div class="two">中间行</div>
    <div class="three">下一行</div> -->



    <!-- <p>这是一段话: Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic eum et inventore, ullam quo consequatur nam debitis omnis nobis similique fuga quae necessitatibus voluptatum porro laborum accusantium nulla. Ut, ipsam!</p> -->


    <!-- <a href="#">这超链接</a> -->

    <!-- 这是一个em/i（倾斜）标签 -->
    <!-- <em>
        这是一个em标签
    </em> -->
    <!-- <div class="one">s
        这是一行字
    </div>
    <div class="tow">
        这是一行字
    </div>
    <div class="three">
        这是一行字
    </div>
    <div class="four">
        这是一行字
    </div>
    <div>
        这是一行字
    </div> -->
    
    <!-- <div>这是一个div</div> -->

    <!-- <ul>
        <li class="name">咬人猫</li>
        <li> 
            <span>咬人猫</span>
        </li>
        <li>咬人猫</li>
    </ul>
    <ol>
        <li class="name">咬人猫</li>
        <li> 
          <span>咬人猫</span>
        </li>
        <li>咬人猫</li>
    </ol> -->

     <!-- <p >
        hello world
    </p>
     <p >
        hello java
    </p>
    <p id="cpp">
        hello C++
    </p>
    <p>
        hello Python
    </p> -->

</body>
</html>

     <!-- <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #cpp{
        color: red;
    }
    </style> -->


    <!-- <style>
        /* 这就是一个类选择器 */
        /* 格式： .类名{属性...}  */
        .red{
            color: red;
            /* 设置文字大小 */
            font-size: 40px;
        }

    </style> -->
     <!-- p 标签，就可以通过添加类属性class，并标明类名 -->
     <!-- 此时，p标签就可以获得 CSS 代码的属性 -->
     <!-- 注意：使用class类引入的时候，类名前面就不要加点了 -->
    <!-- <p class="red">
        hello world
    </p> -->
    <!-- 这个p标签，8也是同理 -->
    <!-- <p >
        hello java
    </p>
    <p class="red">
        hello C++
    </p>
    <p>
        hello Python
    </p> -->





        <!-- <style>
        /* 这是一个内部样式的写法 */
        p{
            color: red;
        }
    </style> -->

    <!-- 这是一个内联样式的写法 -->
    <!-- <p style="color:red">
        hello world
    </p> -->